<style>

</style>
<template>
  <el-dialog
    title="域场景配置"
    :visible.sync="dialogVisible"
    :close-on-press-escape="false"
    :close-on-click-modal="false"
    width="60%"
    :before-close="clearForm">

    <el-form
      :label-position="labelPosition"
      label-width="80px"
      :model="saveData"
      :rules="rules"
      ref="ruleForm">

      <el-form-item label="域名称">
        <el-input disabled v-model="domainName"></el-input>
      </el-form-item>

      <el-form-item label="域Code" prop="domainCode">
        <el-input disabled v-model="saveData.domainCode"></el-input>
      </el-form-item>

      <el-form-item label="场景对" required>
        <template v-for="(item,index) in saveData.scenePairs">
          <el-form :rules="scenePairRules"
                   style="margin-bottom: 15px"
                   :inline="true"
                   ref="scenePairForm"
                   :model="item"
                   label-width="80px">
            <el-form-item label="场景名字" prop="sceneName">
              <el-input v-model="item.sceneName"></el-input>
            </el-form-item>
            <el-form-item label="场景编码" prop="sceneCode">
              <el-input v-model="item.sceneCode"></el-input>
            </el-form-item>
            <el-form-item label="">
              <el-button
                v-if="index === 0"
                type="primary"
                icon="el-icon-plus" circle
                size="mini"
                @click="addScenePair">
              </el-button>
              <el-button v-if="index !== 0"
                         type="danger"
                         icon="el-icon-delete" circle
                         size="mini"
                         @click="removeScenePair(index)">
              </el-button>
            </el-form-item>
          </el-form>
        </template>
      </el-form-item>
    </el-form>

    <span slot="footer" class="dialog-footer">
    <el-button @click="clearForm">取 消</el-button>
    <el-button type="primary" @click="save">确 定</el-button>
  </span>
  </el-dialog>
</template>
<script>

import {saveScene, sceneQuery} from "../../../api/sceneApi";

export default {
  name: "domainScene",
  components: {},
  data() {
    const validateSceneName = (rule, value, callback) => {
      let vm = this
      let size = 0
      for (let i = 0; i < vm.saveData.scenePairs.length; i++) {
        if (vm.saveData.scenePairs[i].sceneName === value) {
          size++
        }
      }
      if (size > 1) {
        callback(new Error(value + " 不能有多个"))
      }
    };
    const validateSceneCode = (rule, value, callback) => {
      let vm = this
      let size = 0
      for (let i = 0; i < vm.saveData.scenePairs.length; i++) {
        if (vm.saveData.scenePairs[i].sceneCode === value) {
          size++
        }
      }
      if (size > 1) {
        callback(new Error(value + " 不能有多个"))
      }
    };

    return {
      labelPosition: 'right',
      dialogVisible: false,
      saveData: {
        domainCode: '',
        scenePairs: [],
      },
      domainName: '',
      // 过时
      rules: {
        domainCode: [
          {required: true, message: '此项必填', trigger: 'blur'}
        ]
      },
      scenePairRules: {
        sceneName: [
          {required: true, message: '此项必填', trigger: 'blur'},
          {validator: validateSceneName, trigger: 'blur'}
        ],
        sceneCode: [
          {required: true, message: '此项必填', trigger: 'blur'},
          {validator: validateSceneCode, trigger: 'blur'}
        ],
      }
    }
  },
  created() {
  },
  mounted() {
  },
  methods: {
    async load(data) {
      let vm = this
      vm.domainName = data.domainName
      let ret = await sceneQuery(data.domainCode);
      if (ret.ok) {
        vm.saveData = ret.data.scene
        // 第一次进来会初始化
        if (vm.saveData.scenePairs.length === 0) {
          vm.saveData.scenePairs.push({sceneName: "", sceneCode: ""})
        }
        vm.dialogVisible = true
      } else {
        vm.$message({type: 'error', message: '加载失败：' + ret.message});
      }
    },
    async save() {
      let vm = this
      let validateRes = true
      for (let i = 0; i < this.$refs['scenePairForm'].length; i++) {
        this.$refs['scenePairForm'][i].validate((valid) => {
          if (!valid) {
            validateRes = valid
          }
        })
      }
      if (validateRes) {
        await vm.doSave(this.saveData)
      }
    },
    async doSave(saveData) {
      let vm = this
      let ret = await saveScene(saveData);
      if (ret.ok) {
        vm.$message({type: 'success', message: '保存成功!'});
      } else {
        vm.$message({type: 'error', message: '保存失败：' + ret.message});
      }
    },
    clearForm() {
      let vm = this
      try {
        for (let i = 0; i < this.$refs['scenePairForm'].length; i++) {
          this.$refs['scenePairForm'][i].resetFields()
        }
      } catch (e) {
        console.log(e)
      }
      vm.dialogVisible = false
    },
    addScenePair() {
      this.saveData.scenePairs.push({sceneName: "", sceneCode: ""})
    },
    removeScenePair(index) {
      this.saveData.scenePairs.splice(index, 1);
    }
  }
}
</script>
